<template>
<!-- 引导页 -->
    <div class="logincontainer whitebg">
        <div class="logintop">
            <van-swipe @change="onChange" :loop='false'>
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" class='classimg' />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="loginbox flexcenter flexcolumn" :class="index===2?'index3':''">
            <template v-if="index===0">
                <div class="itemtext">搜集投票资源</div>
                <div class="itemtext">点击立即参与</div>
            </template>
            <template v-if="index===1">
                <div class="itemtext">补全信息</div>
                <div class="itemtext">立即提交</div>
            </template>
            <template v-if="index===2">
                <div class="itemtext">信息审核通过</div>
                <div class="itemtext">立即提现</div>
                <div class="mt-40 loadbtn" @click="onSubmit">
                    <span class="logintext"> 立即体验 </span>
                </div>
            </template>
            
        </div>
    </div>
</template>

<script>
import PageBody from './PageBody.vue';
import { Toast } from 'vant'
export default {
  data() {
    return {
      index:0,
      images:[require('@/assets/images/swiper1.png'),require('@/assets/images/swiper2.png'),require('@/assets/images/swiper3.png')],
      showpsd:false,
    }
  },

  components:{
    PageBody
  },

  mounted() {
  },

  methods: {
    
    onChange(index){
        console.log('index:',index);
        this.index = index;
    },
    
    onSubmit(){
        this.$router.push({name:'Home'})
    },
  }
}
</script>
<style lang="scss">
.logincontainer{
    .van-swipe{
        overflow: inherit;
    }
    .van-swipe__indicators{
        bottom:-24px;
        .van-swipe__indicator{
            height: 6px;
            width: 52px;
            border-radius: 0;
            background-color: #F5F5F5;
        }
        .van-swipe__indicator--active{
            background-color: #FD9F93;
        }
    }
}   

</style>
<style lang="scss" scoped>
.logincontainer{
  width: 100%;
  height: 100vh;
}
.logintop{
    // height: 370px;
    width: 100%;

    img{
        width: 100%;
    }
    .classimg{
        // height: 1000px;
    }
}
.loginbox{
    width: 100%;
    padding: 110px 40px 40px;
    // margin-top: 68px;
}
.index3{
    padding-top: 90px;
}
.itemtext{
    font-size: 40px;
    color: #000;
    line-height: 64px;
    font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
    font-weight: 700;
}
.loadbtn{
    width: 360px;
    height: 80px;
    background-color: #EC865C;
    border-radius: 40px;
    // background: url('~@/assets/images/lgoinbg.png') center no-repeat ;
    // background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.logintext{
    margin-top: -10px;
    color: #fff;
}
</style>
